<script setup>
import { ref } from 'vue';
import { useRequest } from '@/hooks/pages-repeat';
import { scheduleLogApi } from '@/api/job/schedule.js';

const emits = defineEmits(['modalClose'])
const { 
  requestObj, 
  requestInit,
  pagination,
  rowSelection,
  getDataList,
}  = useRequest()
requestInit({
  isPage: true,
  listApi: scheduleLogApi,
  query: {
    page: 1,
    limit: 20,
    jobId: '',
  }
})

const columns = ref([
  {
    title: '任务ID',
    dataIndex: 'jobId',
    ellipsis: true
  },
  {
    title: 'bean名称',
    dataIndex: 'beanName',
  },
  {
    title: '参数',
    dataIndex: 'params',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '耗时(单位：毫秒)',
    dataIndex: 'times',
  },
  {
    title: '执行时间',
    dataIndex: 'createDate',
  }
])

const modalOpen = ref(false)
const init = () => {
  modalOpen.value = true
  getDataList()
}

defineExpose({
  init
});
</script>

<template>
  <a-modal 
    width="80%"
    v-model:open="modalOpen" 
    title="日志列表" 
    okText="确定"
    cancelText="取消"
    :bodyStyle="{'padding': '20px'}"
    @cancel="emits('modalClose')"
    @ok="emits('modalClose')"
    >
    <a-spin :spinning="requestObj.dataLoading">
      <a-row :gutter="20" wrap>
        <a-col :span="3">
          <a-input v-model:value.trim="requestObj.query.jobId" allowClear placeholder="任务ID" />
        </a-col>

        <a-col :span="3">
          <a-space>
            <a-button @click="getDataList()">查询</a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-table 
        class="table-common"
        :columns="columns" 
        :data-source="requestObj.dataList" 
        rowKey="id" 
        bordered
        :pagination="requestObj.isPage ? pagination : false"
        :loading="requestObj.dataLoading"
        :row-selection="rowSelection"
        @change="getDataList"
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex==='status'">
            <a-tag color="blue" v-if="record.status===1">成功</a-tag>
            <a-tag color="red" v-else>失败</a-tag>
          </template>
        </template>

        <template #emptyText>
          <a-empty :description="requestObj.emptyText" />
        </template>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<style lang="scss" scoped>

</style>